import React, { Component } from "react";
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";

export default class App extends Component {
  //状态在哪里，操作状态的方法就在哪里

  //初始化状态
  state = {
    todos: [
      {
        id: "001",
        name: "吃饭",
        done: true,
      },
      {
        id: "002",
        name: "睡觉",
        done: true,
      },

      {
        id: "003",
        name: "打代码",
        done: false,
      },
      {
        id: "004",
        name: "逛街",
        done: true,
      },
    ],
  };
  //给子组件传给一个回调,子组件传给一个todo进行接受
  addTodo = (todoObj) => {
    const { todos } = this.state;
    //数组前面追加
    const newTodos = [todoObj, ...todos];
    //更新状态
    this.setState({ todos: newTodos });
  };
  //用于更新一个todo
  updateTodo = (id, done) => {
    //获取状态中的todos
    const { todos } = this.state;
    //匹配处理数据
    const newTodos = todos.map((item) => {
      if (item.id === id) return { ...item, done };
      else return item;
    });
    this.setState({ todos: newTodos });
  };

  //选中所有(全选)
  checkAllTodo = (done) => {
    //获取状态中的todos
    const { todos } = this.state;
    const newTodos = todos.map((item) => {
      return { ...item, done };
    });
    this.setState({ todos: newTodos });
  };

  //删除todo
  deleteTodo = (id) => {
    //获取状态中的todos
    const { todos } = this.state;
    //删除指定id的元素
    const newTodos = todos.filter((todoObj) => {
      return todoObj.id !== id;
    });
    //更新状态
    this.setState({ todos: newTodos });
  };

  //清除所有的已完成
  clearAllTodo = () => {
    //获取状态中的todos
    const { todos } = this.state;
    //过滤数据
    const newTodos = todos.filter((item) => item.done === false);
    //过滤数据取反写法
    // 过滤器会滤掉return 为 false的结果，保留return true的结果，所以已完成的任务done为true，然后取反就会被过滤掉
    // todos.filter((item) => !item.done );
    this.setState({ todos: newTodos });
  };

  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List
            todos={todos}
            updateTodo={this.updateTodo}
            deleteTodo={this.deleteTodo}
          />
          <Footer
            todos={todos}
            checkAllTodo={this.checkAllTodo}
            clearAllTodo={this.clearAllTodo}
          />
        </div>
      </div>
    );
  }
}
